<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.38">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <link rel="icon" href="/imgs/favicon.ico"><title>ParallelUglifyPlugin | Webpack</title><meta name="description" content="技术型高端人才培训计划系列课程">
    <link rel="modulepreload" href="/webpack5-doc/assets/app.69823687.js"><link rel="modulepreload" href="/webpack5-doc/assets/paralleluglify.html.50f016a5.js"><link rel="modulepreload" href="/webpack5-doc/assets/paralleluglify.html.56ef2641.js">
    <link rel="stylesheet" href="/webpack5-doc/assets/style.d7931ed9.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/webpack5-doc/" class=""><img class="logo" src="/webpack5-doc/imgs/favicon.ico" alt="Webpack"><span class="site-name can-hide">Webpack</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/webpack5-doc/base/" class="" aria-label="基础"><!--[--><!--]--> 基础 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/webpack5-doc/progress/" class="router-link-active" aria-label="进阶"><!--[--><!--]--> 进阶 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/webpack5-doc/senior/" class="" aria-label="高级"><!--[--><!--]--> 高级 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/webpack5-doc/project/" class="" aria-label="项目"><!--[--><!--]--> 项目 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/webpack5-doc/origin/" class="" aria-label="原理"><!--[--><!--]--> 原理 <!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" placeholder="Search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/webpack5-doc/base/" class="" aria-label="基础"><!--[--><!--]--> 基础 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/webpack5-doc/progress/" class="router-link-active" aria-label="进阶"><!--[--><!--]--> 进阶 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/webpack5-doc/senior/" class="" aria-label="高级"><!--[--><!--]--> 高级 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/webpack5-doc/project/" class="" aria-label="项目"><!--[--><!--]--> 项目 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/webpack5-doc/origin/" class="" aria-label="原理"><!--[--><!--]--> 原理 <!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading active">进阶实战 <!----></p><!--[--><ul style="" class="sidebar-item-children"><!--[--><li><a href="/webpack5-doc/progress/" class="router-link-active sidebar-item" aria-label="前言"><!--[--><!--]--> 前言 <!--[--><!--]--></a><!----></li><li><a href="/webpack5-doc/progress/need.html" class="sidebar-item" aria-label="需求"><!--[--><!--]--> 需求 <!--[--><!--]--></a><!----></li><li><a href="/webpack5-doc/progress/base.html" class="sidebar-item" aria-label="基本配置"><!--[--><!--]--> 基本配置 <!--[--><!--]--></a><!----></li><li><a href="/webpack5-doc/progress/env.html" class="sidebar-item" aria-label="环境分离"><!--[--><!--]--> 环境分离 <!--[--><!--]--></a><!----></li><li><a href="/webpack5-doc/progress/react.html" class="sidebar-item" aria-label="React配置"><!--[--><!--]--> React配置 <!--[--><!--]--></a><!----></li><li><a href="/webpack5-doc/progress/copy.html" class="sidebar-item" aria-label="Copy静态文件"><!--[--><!--]--> Copy静态文件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/webpack5-doc/progress/paralleluglify.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="ParallelUglifyPlugin"><!--[--><!--]--> ParallelUglifyPlugin <!--[--><!--]--></a><!----></li><li><a href="/webpack5-doc/progress/summary.html" class="sidebar-item" aria-label="总结"><!--[--><!--]--> 总结 <!--[--><!--]--></a><!----></li><!--]--></ul><!--]--></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="paralleluglifyplugin" tabindex="-1"><a class="header-anchor" href="#paralleluglifyplugin" aria-hidden="true">#</a> ParallelUglifyPlugin</h1><p>大家会看到TP项目里用到<code>ParallelUglifyPlugin</code>这个插件, 下面是这个插件的介绍。</p><p>webpack默认提供了UglifyJS插件来压缩JS代码，但是它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)。使用UglifyJS压缩代码如下：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>optimize<span class="token punctuation">.</span>UglifyJsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">sourceMap</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      <span class="token literal-property property">compress</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">warnings</span><span class="token operator">:</span> <span class="token boolean">false</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>项目扩大之后我们常用多个子进程去解析和编译JS,css,等，这样就可以并行处理多个子任务，多个子任务完成后，再将结果发到主进程中，有了这个思想后，因此 ParallelUglifyPlugin 插件就产生了，当webpack有多个JS文件需要输出和压缩时候，原来会使用UglifyJS去一个个压缩并且输出，但是ParallelUglifyPlugin插件则会开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了，并行处理多个子任务，效率会更加的提高。</p><p>安装 <code>webpack-parallel-uglify-plugin</code> 插件</p><p><code>npm i webpack-parallel-uglify-plugin -D</code></p><p>然后在webpack.config.js 配置代码如下：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 引入 ParallelUglifyPlugin 插件</span>
<span class="token keyword">const</span> ParallelUglifyPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;webpack-parallel-uglify-plugin&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">// 使用 ParallelUglifyPlugin 并行压缩输出JS代码</span>
    <span class="token keyword">new</span> <span class="token class-name">ParallelUglifyPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token comment">// 传递给 UglifyJS的参数如下：</span>
      <span class="token literal-property property">uglifyJS</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token comment">/*
           是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
           可以设置为false
          */</span>
          <span class="token literal-property property">beautify</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
          <span class="token comment">/*
           是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
          */</span>
          <span class="token literal-property property">comments</span><span class="token operator">:</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token literal-property property">compress</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token comment">/*
           是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
           不大的警告
          */</span>
          <span class="token literal-property property">warnings</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>

          <span class="token comment">/*
           是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
          */</span>
          <span class="token literal-property property">drop_console</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>

          <span class="token comment">/*
           是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
           转换，为了达到更好的压缩效果，可以设置为false
          */</span>
          <span class="token literal-property property">collapse_vars</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>

          <span class="token comment">/*
           是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = &#39;xxx&#39;; y = &#39;xxx&#39;  转换成
           var a = &#39;xxxx&#39;; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
          */</span>
          <span class="token literal-property property">reduce_vars</span><span class="token operator">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br></div></div><p>在通过 new ParallelUglifyPlugin() 实列化时，支持以下参数配置如下：</p><ul><li><p>test: 使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩，默认是 /.js$/.</p></li><li><p>include: 使用正则去包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].</p></li><li><p>exclude: 使用正则去不包含被 ParallelUglifyPlugin 压缩的文件，默认为 [].</p></li><li><p>cacheDir: 缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，cacheDir 用于配置缓存存放的目录路径。默认不会缓存，想开启缓存请设置一个目录路径。</p></li><li><p>workerCount：开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1。</p></li><li><p>sourceMap：是否为压缩后的代码生成对应的Source Map, 默认不生成，开启后耗时会大大增加，一般不会将压缩后的代码的</p></li><li><p>sourceMap发送给网站用户的浏览器。</p></li><li><p>uglifyJS：用于压缩 ES5 代码时的配置，Object 类型，直接透传给 UglifyJS 的参数。</p></li><li><p>uglifyES：用于压缩 ES6 代码时的配置，Object 类型，直接透传给 UglifyES 的参数。</p></li></ul><p>因此 使用 ParallelUglifyPlugin 实列会有以下参数配置项：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">ParallelUglifyPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">uglifyJS</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">.js$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span>
  <span class="token literal-property property">include</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">cacheDir</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">workerCount</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">sourceMap</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><!--]--></div><footer class="page-meta"><!----><!----><!----></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/webpack5-doc/progress/copy.html" class="" aria-label="Copy静态文件"><!--[--><!--]--> Copy静态文件 <!--[--><!--]--></a></span><span class="next"><a href="/webpack5-doc/progress/summary.html" class="" aria-label="总结"><!--[--><!--]--> 总结 <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/webpack5-doc/assets/app.69823687.js" defer></script>
  </body>
</html>
